<template>
<div>
  <MyHeader></MyHeader>
  <div id="search">
    <div style="float: left;padding-left: 100px"><a href="/"><img src="../assets/logo.jpg"></a></div>
    <div style="margin: 0 auto;width: 700px;align-content: center">
      <el-input v-model="serchs" style="width: 300px">

      </el-input>
      <el-button type="danger" @click="searchBook" style="height: 40px">搜索</el-button>
    </div>
  </div>

  <hr style="border: #de0100 solid 1px"/>

  <!--  {{this.$route.params.word}}-->
  <!--商品列表-->
  <div class="book">
    <div v-for="item in books">
      <a :href="urls+item.book.bookid">
        <div class="proct pull-right">
          <div v-for="(item1,index) in item.bookimg " v-if="index==0" style="width: 100%">
            <img :src="item1.bookimageaddress" style="width: 100%;height: 234px">
          </div>
          <!--            <img src="../assetsimg/book/Java核心技术_第10版_卷1_原书.png">-->
          <p>{{ item.book.bookname }}</p>
          <p class="prices" v-if="item.book.isfree==0">￥{{ item.book.bookprice }}</p>
          <p class="prices" v-if="item.book.isfree===1">免费</p>
          <p class="prices" v-if="item.book.isfree===2">积分兑换</p>
        </div>
      </a>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Search",
  data(){
    return{
      name: this.$route.params.word,
      books: null,
      urls: '/details/',
      slideshow: [],
      serchs: '',
      //访问量
      visitNum:'',
      //阅读量
      readNum:'',
      //购买量
      shopNum:''
    }
  },
  created() {
    var vm = this
    var regPos = /^\d+(\.\d+)?$/; //非负浮点数
    if(regPos.test(this.name)){
      console.log("数字")
      axios.get('http://localhost:8082/book-manager/book/selectBookByType?name='+this.name).then(function (resp){
        console.log(resp.data)
        if(resp.data!=null){
          vm.books = resp.data

        }
      })
    } else{
      axios.get("http://localhost:8082/book-manager/book/selectBook?name="+this.name).then(function (resp){
        console.log(resp.data)
        vm.books = resp.data
      })
    }


  },
  methods:{
    searchBook() {
      this.$router.push("/search/"+this.serchs)
      location.reload()
    }
  }
}
</script>

<style scoped>
.content {
  /*margin-top: 25px;*/
  width: 95%;
  margin: 0 auto;
}

li {
  list-style-type: none;
}

#search {
  height: 50px;
  margin-top: 60px;
}

#search input {
  /*border: #de0100 solid 1px;*/
  width: 300px;
  height: 36px;
}

#search span {
  margin-left: 0px;
}

button {
  width: 132px;
  height: 36px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 5px;
  background-color: #de0100;
  position: absolute;
  z-index: 1;
  border-radius: 0;
  color: white;
}

.proct {
  /*border: 1px solid #555555;*/
  width: 240px;
  height: 310px;
  display: inline-block;
  margin-left: 49px;
  margin-top: 20px;
  text-align: left;
}

.carousel-inner {
  margin: 0 auto;
  width: 100%;
  height: 578px;
}

.book div {
  display: inline-block;
  text-align: left;
}

p {
  margin-left: 2px;
  text-align: center;
  color: #333;
  line-height: 20px;
  font-size: 20px;
  height: 30px;
}

.prices {
  color: #de0100;
  /*margin-bottom: 30px;*/
}

.carousel-inner-carousel {
  height: 100%;
  width: 100%
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

</style>
